<script setup lang="ts">
import { usePlayerStore } from '@/stores/playerStore'
import useSyncWrapperTransform from '@/components/player/hooks/use-sync-cd-wrapper-transform'
import { px2vmin } from '@/utils'
import type { SwipeInstance } from 'vant'
interface IProps {
  sliderValue: number
  showMusicListCom?: boolean
}

const route = useRoute()
const props = defineProps<IProps>()
const emits = defineEmits<{
  (event: 'update:show-play-list', visible: boolean): void
}>()
// 同步cd唱片滚动
useSyncWrapperTransform('.mini-player .cd', '.mini-player .cd-pic')
const playerStore = usePlayerStore()
const swipeRef = ref<SwipeInstance>()
const currentSong = computed<ISongItem | undefined>(() => {
  return playerStore.playlist[playerStore.currentIndex]
})
const bottomStyle = computed<string>(() => {
  if (playerStore.showSearch) {
    return '0'
  }
  return (route.meta as { hasTabbar: boolean }).hasTabbar ? px2vmin(50) : '0'
})
onMounted(async () => {
  await nextTick()
  if (props.showMusicListCom) {
    // 迷你播放器swiper滚动到当前播放歌曲的位置
    swipeRef.value?.swipeTo(playerStore.currentIndex)
  }
})
watch(
  () => playerStore.currentIndex,
  async (newIndex: number) => {
    await nextTick()
    // 迷你播放器swiper滚动到当前播放歌曲的位置
    swipeRef.value?.swipeTo(newIndex)
  }
)
// 判断子元素是否超过父元素
const isExceed = ref<boolean>(false)
const isShowMiniPlayer = computed<boolean>(() => {
  return (!playerStore.fullScreen && playerStore.playlist.length > 0) || props.showMusicListCom
})
watch(isShowMiniPlayer, async (newVal: boolean) => {
  const swipeRefValue = swipeRef.value
  await nextTick()
  if (newVal) {
    // swiper 重新计算宽度,因为mini-player组件是使用v-show指令来控制显示隐藏的,所以van-swipe组件只会初始化一次,当展示mini-player组件时，我们需要调用van-swipe组件的resize方法重新去计算宽度,否则宽度不对不能进行滚动
    swipeRefValue?.resize()
    swipeRefValue?.swipeTo(playerStore.currentIndex)
  }
})
watch(
  () => playerStore.fullScreen,
  async (newVal) => {
    if (newVal) {
      return
    }
    await nextTick()
    swipeRef.value?.swipeTo(playerStore.currentIndex)
    const outerEles = document.querySelectorAll('.mini-player .song-item .song-text')
    const index = playerStore.sequenceList.findIndex((song) => song.id === currentSong.value?.id)
    if (index < 0) {
      return
    }
    if (outerEles[index]) {
      const innerEle = outerEles[index].querySelector('.text')
      if (innerEle) {
        isExceed.value = innerEle.clientWidth > outerEles[index].clientWidth
      }
    }
  }
)
// 迷你播放器swiper切换事件
function onMiniSwiperChange(index: number) {
  if (!playerStore.playing) {
    playerStore.playing = true
  }
  playerStore.currentIndex = index
}
function playlistClick() {
  emits('update:show-play-list', true)
}
function swiperClick() {
  if (props.showMusicListCom) {
    ;(document.querySelector('#play-music-list-wrapper')! as HTMLElement).style.zIndex = '130'
  }
  playerStore.fullScreen = true
}
</script>

<template>
  <transition name="popup">
    <div v-show="isShowMiniPlayer" class="mini-player" @click.stop>
      <section class="cd-wrapper">
        <van-swipe
          ref="swipeRef"
          :show-indicators="false"
          class="my-swipe"
          @change="onMiniSwiperChange"
        >
          <van-swipe-item
            v-for="song in playerStore.sequenceList"
            :key="song.id"
            @click="swiperClick"
          >
            <div class="song-item">
              <div class="cd">
                <img
                  :class="playerStore.playing && song.id === currentSong?.id ? 'turn' : ''"
                  class="cd-pic"
                  :src="song?.al.picUrl"
                  alt=""
                />
              </div>
              <div class="song-text">
                <p class="song-name">
                  <vue3-marquee v-if="isExceed">
                    <span class="text">{{ song.name }} </span>
                  </vue3-marquee>
                  <span v-else class="text">{{ song.name }} </span>
                </p>
                <p class="song-singer">{{ song.ar[0]?.name }}</p>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </section>
      <div class="icon-wrapper">
        <span class="circle-progress" @click.stop="playerStore.playing = !playerStore.playing">
          <i class="iconfont" :class="playerStore.playing ? 'icon-pause-mini' : 'icon-play-mini'" />
          <van-circle
            color="#ffcd32"
            layer-color="rgba(255, 205, 49, 0.5)"
            :size="30"
            :current-rate="props.sliderValue"
            :rate="30"
            :speed="100"
            :stroke-width="120"
          />
        </span>
        <i class="iconfont icon-playlist" @click="playlistClick" />
      </div>
    </div>
  </transition>
</template>

<style scoped lang="scss">
.mini-player {
  display: flex;
  position: fixed;
  left: 0;
  bottom: v-bind(bottomStyle);
  width: 100%;
  background-color: $color-background;
  transition: bottom 0.3s;
  z-index: 130;
  .cd-wrapper {
    flex: 1;
    overflow: hidden;
    .my-swipe {
      height: 50px;
    }
    .song-item {
      display: flex;
      padding: 0 10px;
      height: 50px;
      .cd {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        .cd-pic {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          border: 2px solid $color-dialog-background;
        }
      }
      .song-text {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        flex: 1;
        font-size: $font-size-small;
        overflow: hidden;
        white-space: nowrap;
        .song-name {
          .text {
            display: inline-block;
          }
        }
        .song-singer {
          color: $color-text-d;
        }
      }
    }
  }
  .icon-wrapper {
    display: flex;
    width: 80px;
    height: 50px;
    .circle-progress {
      position: relative;
      flex: 1;
      i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        font-size: 30px;
        color: $color-theme-d;
      }
      .van-circle {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        z-index: 10;
      }
    }
    .icon-playlist {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $color-theme-d;
      font-size: $font-size-large-xx;
    }
  }
}
</style>
